<!doctype html>
<html>
<head>
<title>计算器css美化</title>
</head>
<style>
 td{
	 color:red;
	 background-color:dodgerblue;
	 border: 1px solid blue;
	 font-size:20px;
	 width:100px;
	 height:70px;
	 text-align:center;
	
 }
 table{
	 border-spacing:0px;
	 width:400px;
	 height:350px;
	 margin:0 auto; 
 }
 td:hover{
	 cursor:pointer;
	 background-color:orange;
 }
 #red{
	 color:red;
	 
 }
 #blue{
	 color:blue;
 }
 #green{
	 color:green;
 }
 #dimgrey{
	 background-color:dimgrey;
	 border-radius:15px 15px 0px 0px;
	 font-size:40px;
	 text-align:left;
 }
 #white{
	 background-color:white;
	 text-align:left;

 }
 #td-yj1{
	 border-radius:0px 0px 0px 15px;
 }
 #td-yj2{
 	border-radius:0px 0px 15px 0px;
 }
 a:link{
	 color:blue;
 }
 a:visited{
	 color:red;
 }
 a:active{
	 color:pink;
 }
</style>
<body>
 <table> 
   <tr>
    <td colspan="4" id="dimgrey" >
	   <span id="red">●</span><span id="blue">●</span><span id="green">●</span></td> 
   </tr>
   <tr>
    <td colspan="4" id="white"><a href="https://www.baidu.com">123</a></td> 
   </tr>
   <tr > 
    <td >AC</td> 
    <td >+/-</td>    
    <td >%</td>
    <td >/</td>
   </tr>
   <tr > 
    <td>7</td> 
    <td>8</td>    
    <td>9</td>
    <td >*</td>
   </tr>
   <tr >
    <td>4</td> 
    <td>5</td>    
    <td>6</td>
    <td >-</td>
   </tr>
   <tr >
    <td>1</td> 
    <td>2</td>    
    <td>3</td>
    <td >+</td>
   </tr>
   <tr >
    <td id="td-yj1">0</td> 
    <td>删除</td>    
    <td>.</td>
    <td id="td-yj2" >=</td>
   </tr>
 </table>
</body>
</html>